<template>
  <div class="app">
    <!-- <three-js-prc-141></three-js-prc-141> -->
    <!-- <three-js-prc-111></three-js-prc-111> -->
    <ThreeJsPrc101 />
    <!-- <three-js-prc-81></three-js-prc-81> -->
    <!-- <three-js-prc-77></three-js-prc-77> -->
    <!-- <three-js-prc-72></three-js-prc-72> -->
    <!-- <three-js-prc-63></three-js-prc-63> -->
    <!-- <three-js-prc-62></three-js-prc-62> -->
    <!-- <three-js-prc-52></three-js-prc-52> -->
    <!-- <three-js-prc-31></three-js-prc-31> -->
    <!-- <three-js-prc-27></three-js-prc-27> -->
    <!-- <three-js-prc-21></three-js-prc-21> -->
    <!-- <three-js-prc-16></three-js-prc-16> -->
    <!-- <three-js-prc-15></three-js-prc-15> -->
    <!-- <three-js-prc-14></three-js-prc-14> -->
    <!-- <three-js-prc-13></three-js-prc-13> -->
    <!-- <three-js-prc></three-js-prc> -->
    <!-- <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" /> -->
  </div>
</template>
<script lang="ts">
import { Vue, Options } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';
import ThreeJsPrc from './components/threeJSPrc1/ThreeJsPrc.vue';
import ThreeJsPrc13 from './components/threeJSPrc1/ThreeJsPrc13.vue';
import ThreeJsPrc14 from './components/threeJSPrc1/ThreeJsPrc14.vue';
import ThreeJsPrc15 from './components/threeJSPrc1/ThreeJsPrc15.vue';
import ThreeJsPrc16 from './components/threeJSPrc1/ThreeJsPrc16.vue';
import ThreeJsPrc21 from './components/threeJSPrc2/ThreeJsPrc21.vue';
import ThreeJsPrc27 from './components/threeJSPrc2/ThreeJsPrc27.vue';
import ThreeJsPrc31 from './components/threeJsPrc3/ThreeJsPrc31.vue';
import ThreeJsPrc52 from './components/ThreeJsPrc52.vue';
import ThreeJsPrc62 from './components/threeJSPrc6/ThreeJsPrc62.vue';
import ThreeJsPrc63 from './components/threeJSPrc6/ThreeJsPrc63.vue';
import ThreeJsPrc72 from './components/threeJSPrc7/ThreeJsPrc72.vue';
import ThreeJsPrc77 from './components/threeJSPrc7/ThreeJsPrc77.vue';
import ThreeJsPrc81 from './components/threeJSPrc8/ThreeJsPrc81.vue';
import ThreeJsPrc101 from './components/threeJSPrc10/ThreeJsPrc101.vue';
import ThreeJsPrc111 from './components/threeJSPrc11/ThreeJsPrc111.vue';
import ThreeJsPrc141 from './components/threeJSPrc14/ThreeJsPrc141.vue';


@Options({ components: {
  HelloWorld,
  ThreeJsPrc,
  ThreeJsPrc13,
  ThreeJsPrc14,
  ThreeJsPrc15,
  ThreeJsPrc16,
  ThreeJsPrc21,
  ThreeJsPrc27,
  ThreeJsPrc31,
  ThreeJsPrc52,
  ThreeJsPrc62,
  ThreeJsPrc63,
  ThreeJsPrc72,
  ThreeJsPrc77,
  ThreeJsPrc81,
  ThreeJsPrc101,
  ThreeJsPrc111,
  ThreeJsPrc141,
} })
export default class App extends Vue {
}
</script>

<style lang="postcss" scoped>
.app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100%;
  height: 100%;
  &, :deep(button) {
    font-size: 20px;
  }

}
:deep(.directive-btn) {
  transition:transform .4s ease;
}
</style>
